.nation-flag {
    width: 300px;
    height: 200px;
    background:
            linear-gradient(red, red) top,
            linear-gradient(green, green) center,
            linear-gradient(blue, blue) bottom;
    background-size: 100% 33.33%;
    background-repeat: no-repeat;
    margin: 10px;
}
.nation-flag-clip {
    width: 300px;
    height: 200px;
    background:
            linear-gradient(red, red) top,
            linear-gradient(green, green) center,
            linear-gradient(blue, blue) bottom;
    background-size: 100% 33.33%;
    background-repeat: no-repeat;
    clip-path: polygon(35% 0%, 65% 0%, 100% 100%, 0% 100%);
    margin: 10px;
}

.nation-flag2 {
    width: 300px;
    height: 200px;
    background:
            linear-gradient(red, red) left,
            linear-gradient(green, green) center,
            linear-gradient(blue, blue) right;
    background-size:  33.33% 100%;
    background-repeat: no-repeat;
    margin: 10px;
}

.nation-flag-trapezoid {
    width: 200px;
    border-bottom: 50px solid blue;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    height: 0px;
    margin-bottom: 15px;
}

.nation-flag-trapezoid2 {
    width: 200px;
    height: 100px;
    background: blue;
    clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
    margin-bottom: 15px;
}

.nation-flag-trapezoid3 {
    width: 200px;
    height: 100px;
    background: blue;
    transform: perspective(200px) rotateX(10deg);
}

